<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/general.css" />
		<link rel="stylesheet" type="text/css" href="../../css/lcs-font.css" />
		<link rel="stylesheet" type="text/css" href="../../css/lcs-pop.css"/>
		<link rel="stylesheet" type="text/css" href="../../business/css/empcss.css"/>
		
		<style type="text/css">
			.main {
				width: 100%;
				background-color: white;
				padding: 0.5em;
			}
			
			.tlist {
				width: 100%;
				background-color: white;
				border-bottom: 1px solid #C7C7C7;
				height: 44px;
				line-height: 44px;
			}
			
			.content {
				width: 100%;
				padding: 0.5em;
				background-color: white;
			}
			
			.sdiv{
				width: 100%;
				text-align: center;
			}
			.sdiv>img{
				width: 20%;
			}
			/*
			.listdiv{
				display: flex;
				align-items: flex-start;
				justify-content: center;
			}*/
			.hicon>img {
			    width: 2.5em;
			    height: 2.5em;
			}
			.hicon{
				z-index: 9999 !important;
			}
			h1{
				width: 40% !important;
				margin: 0 auto !important;
			}
			.mui-popover .mui-btn-block {
			    margin-bottom: 0px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left colorw"></a>
			<h1 class="mui-title">打印设置</h1>
			 <div class="hicon mui-icon-right-nav mui-pull-right" id="addemp">
		    	<img src="../../img/add.png"/>
		    </div>
		     <div class="hicon mui-icon-right-nav mui-pull-right" id="setemp">
		    	<img src="../../img/setprint.png"/>
		    </div>
		</header>
		<div class="mui-content">
			<div class="main">
				<!--
                	作者：592176224@qq.com
                	时间：2019-03-26
                	描述：
				<div class="mui-input-row border-b">
					<label>是否自动打印</label>
					<div class="mui-switch mui-active mui-switch-blue">
						<div class="mui-switch-handle"></div>
					</div>
				</div>
                -->
				<div class="mui-input-row">
					<label>打印份数</label>
					<input id="count" type="text" class="textr" placeholder="请输入数量" value="1">
				</div>
			</div>
			<div class="pad11">
				打印机列表(点击测试打印)				
			</div>
			<div class="" id="plist">
				
			
			</div>	
			
			
			<div id="popover" class="mui-popover">
			   <div class="listdiv">
			   		<div class="idiv">
			   			<div class="mui-input-row">
				   		    <label>打印机名称</label>
				   		    <input id="printer_name" type="text" placeholder="输入名称">
				   		</div>
				   		<div class="mui-input-row">
				   		    <label>编号(SN)</label>
				   		    <input id="sninput" type="text" placeholder="输入编号">
				   		</div>
				   		<div class="mui-input-row">
				   		    <label>密钥(KEY)</label>
				   		    <input id="keyinput" type="text" placeholder="输入密钥">
				   		</div>
			   		</div>
			   		<div class="sdiv" id="scaning">
			   			<img src="../../img/saomiao.png"/>
			   		</div>
			   </div>
			   <button type="button" id="okbut" class="mui-btn mui-btn-blue mui-btn-block">确定</button>
			</div>
			
			<div id="popover2" class="mui-popover">
			   <div class="listdiv">
			   		<div class="idiv">
			   			<div class="mui-input-row">
				   		    <label>表头1</label>
				   		    <input id="header1"  type="text" placeholder="表头1">
				   		</div>
				   		<div class="mui-input-row">
				   		    <label>表头2</label>
				   		    <input id="header2" type="text" placeholder="表头2">
				   		</div>
				   		<div class="mui-input-row">
				   		    <label>表尾1</label>
				   		    <input id="footer1" type="text" placeholder="表尾1">
				   		</div>
				   		<div class="mui-input-row">
				   		    <label>表尾2</label>
				   		    <input id="footer2" type="text" placeholder="表尾2">
				   		</div>
			   		</div>
			   </div>
			   <button type="button" id="subbut" class="mui-btn mui-btn-blue mui-btn-block">确定</button>
			</div>    
		</div>
		<script src="../../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			
			window.onload = function(){
				mui.init();
				
				g("setemp").addEventListener("tap",function(){
					//get_title();
					mui.openWindow({
                        url: 'setprint-detail.html',
                        id: 'setprint-detail',
		            });
					//mui('#popover2').popover('toggle',g("popover2"));
				})
				
				g("addemp").addEventListener("tap",function(){
					
					mui('#popover').popover('toggle',g("popover"));
				})
				g("scaning").addEventListener("tap",function(){
		            mui.openWindow({
                        url: '../../general/scanning-page.html',
                        id: 'scanning-page',
                        //extras: list,
                        show: {
                            aniShow: 'zoom-fade-in',
                            duration: 300
                        },
                        waiting: {
                            autoShow: true
                        }
		            });
				})
				
				g("okbut").addEventListener("tap",function(e){
					var data = {
						url:"/api/printer/add",
						data:{
							access_token:acctoken(),
							sn:g("sninput").value||"",
							key:g("keyinput").value||"",
							printer_name:g("printer_name").value||"",
						}
					}
					ajax(data,function(res){
						console.log("添加打印机",res)
						mui('#popover').popover('hide');
						mui.toast(res.msg);
						get_printer();
					})
				})
				
				
				$('#plist').on('tap', '.close-but', function(event) {
					var elem = this;
					mui.confirm('确认删除该条记录？', '', ["取消","确认"], function(e) {
						if (e.index == 1) {
							console.log(elem.getAttribute("data-id"))
							var data = {
								url:"/api/printer/del",
								data:{
									access_token:acctoken(),
									printer_id:elem.getAttribute("data-id")
								}
							}
							ajax(data,function(res){
								console.log(res)
								mui.toast(res.msg);
								get_printer();
							})
						}
						
					});
				});
				//点击测试
				$('body').on('tap', '.mui-slider-handle', function(event) {
					var elem = this;
					console.log(elem.getAttribute("data-id"))
					var data = {
						url:"/api/printer/wp_print",
						data:{
							access_token:acctoken(),
							printer_id:elem.getAttribute("data-id"),
							order_type:'test',
							count:g("count").value||1,
						}
					}
					ajax(data,function(res){
						console.log(res)
						mui.toast(res.msg);
					})
						
				});
				
				g("subbut").addEventListener("tap",function(){
					set_title();
				})
				
				get_printer();
			}
			
			function set_title(){
				var header1 = g("header1").value,
					header2 = g("header2").value,
					footer1 = g("footer1").value,
					footer2 = g("footer2").value;
				var data = {
					url:"/api/printer/set_title",
					data:{
						access_token:acctoken(),
						header1:header1,
						header2:header2,
						footer1:footer1,
						footer2:footer2,
					}
				}
				ajax(data,function(res){
					console.log(res);
					mui.toast(res.msg);
				})
			}
			
			function get_title(){
				var data = {
					url:"/api/printer/get_title",
					data:{
						access_token:acctoken(),
					}
				}
				
				ajax(data,function(res){
					console.log(res);
					g("header1").value = res.data.header1;
					g("header2").value = res.data.header2;
					g("footer1").value = res.data.footer1;
					g("footer2").value = res.data.footer2;
				})
			}
			
			//设置扫码获得的值
			function setcard_number(res){
				var list = res.split(":");
				g("sninput").value = list[0];
				g("keyinput").value = list[1];
				
			}
			function get_printer(){
				var data = {
					url:"/api/printer/lst",
					data:{
						access_token:acctoken(),
					}
				}
				ajax(data,function(res){
					console.log("打印机列表",res);
					var str = ''
					if(res.data.length > 0){
						res.data.forEach(function(item,index){
						str +=	'<ul class="mui-table-view">'+
			        			/*'<li class="mui-table-view-cell" onclick="wp_printer('+item.id+')">'+
			            		'<a class="mui-navigate-right">'+
			               		item.printer_name+
			            		'</a></li>';*/
			            		'<li class="mui-table-view-cell">'+
								'<div class="mui-slider-right mui-disabled">'+
								'<a data-id="'+item.id+'" class="mui-btn mui-btn-red close-but">删除</a>'+
								'</div>'+
								'<div class="mui-slider-handle" data-id="'+item.id+'">'+
								item.printer_name+
								'</div></li>';
						})
						
						str += '</ul>';
					}else{
						str += '<div class="nolistdiv">暂无打印机<div>'
					}
					g("plist").innerHTML = str;
				})
			}
			
			function wp_printer(){
				
				
			}
		</script>
	</body>

</html>